<template>
  <div class="horizontal-tree">
    <div v-for="node in treeData" :key="node.id" class="tree-node">
      <el-checkbox v-model="node.checked" @change="handleChange(node)">{{ node.label }}</el-checkbox>
      <div v-if="node.children && node.children.length" class="children">
        <div v-for="child in node.children" :key="child.id" class="child-node">
          <el-checkbox v-model="node.checked" @change="handleChange">{{ child.label }}</el-checkbox>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default{
  name: 'HorizontalTree',
  props: ['treeData','menuIds'],
  data() {
    return {
      checkedIds: [],
    };
  },
  created() {
    this.checkedIds = [...this.menuIds];
    // 初始化checked
    this.initChecked();
  },
  methods: {
    // 检查给定的 ID 是否在 checkedIds 数组中
    isChecked(id) {
      return this.checkedIds.includes(id);
    },
    initChecked() {
      this.treeData.forEach(node => {
        node.checked = this.isChecked(node.id);
        if(node.children && node.children.length > 0) {
          node.children.forEach(child => {
            child.checked = this.isChecked(child.id);
          })
        }
      })
    },
    handleChange(node) {
      node.checked = !node.checked;
      if(node.children && node.children.length > 0) {
        node.children.forEach(child => {
          child.checked = !child.checked;
        })
      }
    },
  },
};
</script>

<style scoped>
.horizontal-tree {
  display: flex;
  flex-wrap: wrap; /* 如果父节点太多需要换行，可以保留这个属性 */
  align-items: flex-start; /* 确保所有父节点在垂直方向上对齐 */
}

.tree-node {
  /* 父节点的样式 */
  margin-right: 70px; /* 控制父节点之间的水平间距 */
  /* 注意：我们不再需要 display: flex; 除非你有其他需要在父节点内部使用 flex 的理由 */
}

.children {
  /* 子节点的容器样式，使其垂直堆叠 */
  display: block; /* 默认就是 block，但明确写出有助于理解 */
  margin-top: 15px; /* 子节点与父节点之间的垂直间距 */
  margin-left: 28px;
  margin-bottom: 25px;
}

.child-node {
  margin-top: 12px;
  /* 子节点的样式（如果需要的话） */
  /* 这里可以添加一些内边距或边框等样式来区分子节点 */
}
</style>
